<template>
  <div class="top_bar">
    <div class="logo"><img src="https://bu.dusays.com/2024/09/28/66f7782a0e175.png" alt=""></div>
    <div class="search">
      <el-input v-model="search_input" placeholder="热门商品" :prefix-icon="Search" />
      <div class="search_btn">
        <v-btn class="search_btn_v" :ripple="false" height="5vh" min-width="12vh">
          <v-avatar size="40" image="https://bu.dusays.com/2024/10/31/67231ef608442.png"></v-avatar>
        </v-btn>
      </div>
    </div>
  </div>
  <div class="body">
    <div class="cart_head" style="display: flex;">
      <el-icon class="back" @click="router.push('/user')" style="position: absolute;margin-left: 20vh;margin-top: 0vh;"
        size="35" color="green">
        <Back />
      </el-icon>
      <h2 style="color: green;font-weight: normal;margin: auto;">我的收藏</h2>
    </div>
    <div>
      <div class="fav_box">
        <div class="card" v-for="card in fav_list">
          <el-image @click="jumpDetail(card.items.itemID)" style="width: 20vh; height: 20vh; border-radius: 0.8vh;margin: auto;"
            :src="`https://zizi-1325809325.cos.ap-guangzhou.myqcloud.com/商品列表/List/${card.items.itemImg}.jpg`"
            :fit="fit" />
          <span class="card_name">{{ card.items.itemName }}</span>
          <span style="color: red;">￥{{ card.items.itemPrice }}</span>
        </div>
      </div>
    </div>
  </div>
  <Footer></Footer>
</template>
  
<script setup>
import router from '../../router/index.js'
import request from '../../utils/request'
import { ref } from 'vue';
import { onMounted } from "vue";
import Footer from '@/component/Footer.vue'
const fav_list = ref({})

const jumpDetail = (itemId) => {
  router.push(`/desc/${itemId}`).then(() => {
    window.scrollTo(0, 0);
  });
};

onMounted(() => {
  const uid=sessionStorage.getItem('uid');
  const uidObj=JSON.parse(uid);
  request.get(`/api/user/selectUserFav/${uidObj}`).then(res => {
    fav_list.value = res.data;
    console.log(fav_list.value);
  })
})

</script>
  
<style scoped>
.top_bar {
  width: 100%;
  height: 10vh;
  /* background-color: wheat; */
  display: flex;
}

.top_bar img {
  width: 20vh;
  height: auto;
  margin-left: 20vh;
}

.top_bar .search {
  width: 100vh;
  margin: auto;
  margin-left: 10vh;
  display: flex;
}

.search_btn {
  display: flex;
}

.search .search_btn .search_btn_v {
  margin-left: 2vh;
  background-color: green;
  font-size: 2vh;
  font-weight: bold;
  border-radius: 20px;
}

.body {
  background-color: #E8E8E8;
}

.fav_box {
  width: 80%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  background-color: white;
  margin: auto;
}

.back {
  transition: transform 0.3s ease;
}

.back:hover {
  transform: scale(1.1);
}

.card
{
  transition: transform 0.3s ease;
  width: calc(20% - 4vh);
  height: 30%;
  margin-top: 2vh;
  margin-left: 2vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card:hover
{
  transform: scale(1.01);
}

.card_name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  font-size: 1.9vh;
  font-weight: normal;
}
</style>